<template>
  <div class="headerbox">
    <div class="header">
      <div class="headerL">
        <router-link to="/" class="goback">
          <img src="/assets/images/goback.png" />
        </router-link>
      </div>
      <div class="headerC0">
        <div class="ssdiv">
          <img src="/assets/images/ss.png" />
          <input
            v-model="keywords"
            @change="SelectKeywords"
            placeholder="输入关键字..."
          />
        </div>
      </div>
      <!-- 弹出层 -->
      <div class="headerR" @click="ShowType = true">
        <img src="/assets/images/tr.png" />
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="shopType">
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="flag"
        @change="changeFlag"
        :options="option1"
      />
      <van-dropdown-item
        v-model="orderby"
        @change="changeOrderby"
        :options="option2"
      />
    </van-dropdown-menu>
  </div>
  <div class="clear"></div>
  <div class="hbox"></div>
  <div class="mainWarp" style="background: #f3f3f3">
    <ul class="proul">
      <li v-for="(item, index) in prolist" :key="item.id">
        <router-link
          :to="{ path: '/product/product/info', query: { proid: item.id } }"
        >
          <img :src="item.cover_cdn" />
        </router-link>
        <a href="detail.html">
          <p class="tit">{{ item.name }}</p>
        </a>
        <div class="price">
          <p>
            ￥{{ item.price }}
            <!-- <span>￥8999</span> -->
          </p>
        </div>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <van-popup v-model:show="ShowType" position="right">
    <div class="type">
      <van-sidebar v-model="active" @change="changeType">
        <van-sidebar-item
          v-for="item in typelist"
          :title="item.name"
          :key="item.id"
        />
      </van-sidebar>
    </div>
  </van-popup>
</template>
<script>
export default {
  emits: ["toggle"],
  created() {
    this.$emit("toggle", false);

    //根据分类id查询商品数据
    this.TypeData();
  },
  name: "ProductIndex",
  data() {
    return {
      ShowType: false,
      flag: 0,
      orderby: "id",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "热销商品", value: 2 },
        { text: "推荐商品", value: 3 },
      ],
      option2: [
        { text: "默认排序", value: "id" },
        { text: "价格排序", value: "price" },
        { text: "库存排序", value: "stock" },
      ],
      keywords: "",
      typeid: this.$route.query.typeid ? this.$route.query.typeid : 0,
      prolist: [],
      typelist: [],
      active: 0,
    };
  },
  methods: {
    async TypeData() {
      // console.log(this.typeid)
      var data = {
        typeid: this.typeid,
        flag: this.flag,
        orderby: this.orderby,
        keywords: this.keywords,
      };

      var result = await this.$api.productType(data);
      if (result.code == 1) {
        this.prolist = result.data.prolist;
        this.typelist = result.data.typelist;
      }
    },
    SelectKeywords() {
      this.TypeData();
    },
    changeFlag() {
      this.TypeData();
    },
    changeOrderby() {
      this.TypeData();
    },
    changeType(value) {
      this.active = value;
      this.typeid = this.typelist[value].id;
      this.TypeData();
      this.ShowType = false;
    },
  },
};
</script>

<style >
.type .van-sidebar {
  width: 100px;
  height: 95vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 5vh;
}
</style>